/*
* @moudule:@/views/home/incomeVip
* @author:zm
* @date:2020-11-17
*
*/

<template>
  <div class="productView_container">
    <header>
      <p v-if="formInline.ATTR_TYPE==1">政企客户属性</p>
      <p v-if="formInline.ATTR_TYPE==2">政企服务属性</p>
    </header>
    <main>
      <el-form :inline="true" :model="formInline" class="main_searchBar" ref="form">
        <el-form-item label="区域:">
          <dx-cascader :area_id.sync="formInline.AREA_ID" ref="cascader" />
        </el-form-item>
        <el-form-item label="年份:">
          <el-date-picker size="mini" v-model="formInline.ACCT_MONTH" value-format="yyyy" type="year" placeholder="选择年"
            :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item label="政企属性:">
          <el-select size="mini" v-model="formInline.ATTR_TYPE" clearable>
            <el-option v-for="(item, index) in sxList" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行业类型:" v-if="formInline.ATTR_TYPE==2">
          <el-select size="mini" v-model="formInline.HSX_TYPE" clearable>
            <el-option v-for="(item, index) in hylxList" :key="index" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指标:" v-if="formInline.ATTR_TYPE==2">
          <el-select size="mini" v-model="formInline.INDEX_CODE" clearable>
            <el-option v-for="(item, index) in zbList" :key="index" :label="item.name" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" id="search_btn" @click="handle_search">查询</el-button>
          <el-button size="mini" id="export_btn" @click="handle_export">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="tables">
        <el-tabs v-model="tabActive" type="card" style="margin-top: 10px;">
          <el-tab-pane label="累计同比报表" name="list1"></el-tab-pane>
          <el-tab-pane label="分月趋势报表" name="list2"></el-tab-pane>
        </el-tabs>
        <el-table v-show="tabActive=='list1'" :max-height="height+'px'" id="table" size="mini" :header-cell-style="{background:'#eef1f6'}"
          :data="tableData" border style="width: 100%" v-loading="showTableLoading">
          <el-table-column prop="area_NAME" label="区域名称"></el-table-column>
          <el-table-column prop="p_AREA_NAME" label="上级区域名称"></el-table-column>
          <el-table-column prop="manager_NAME" label="客户经理名称"></el-table-column>
          <el-table-column prop="vip_NBR" label="VIP卡号/客户名称"></el-table-column>
          <el-table-column prop="vip_NAME" label="VIP名称"></el-table-column>
          <el-table-column prop="index_CODE" label="指标"></el-table-column>
          <el-table-column prop="value1" label="1月"></el-table-column>
          <el-table-column prop="value2" label="2月"></el-table-column>
          <el-table-column prop="value3" label="3月"></el-table-column>
          <el-table-column prop="value4" label="4月"></el-table-column>
          <el-table-column prop="value5" label="5月"></el-table-column>
          <el-table-column prop="value6" label="6月"></el-table-column>
          <el-table-column prop="value7" label="7月"></el-table-column>
          <el-table-column prop="value8" label="8月"></el-table-column>
          <el-table-column prop="value9" label="9月"></el-table-column>
          <el-table-column prop="value10" label="10月"></el-table-column>
          <el-table-column prop="value11" label="11月"></el-table-column>
          <el-table-column prop="value12" label="12月"></el-table-column>
        </el-table>
        <el-table v-show="tabActive=='list2'" :max-height="height+'px'" id="table" size="mini" :header-cell-style="{background:'#eef1f6'}"
          :data="tableData" border style="width: 100%" v-loading="showTableLoading">
          <el-table-column prop="area_NAME" label="区域名称"></el-table-column>
          <el-table-column prop="p_AREA_NAME" label="上级区域名称"></el-table-column>
          <el-table-column prop="manager_NAME" label="客户经理名称"></el-table-column>
          <el-table-column prop="vip_NBR" label="VIP卡号/客户名称"></el-table-column>
          <el-table-column prop="vip_NAME" label="VIP名称"></el-table-column>
          <el-table-column prop="index_CODE" label="指标"></el-table-column>
          <el-table-column v-for="(item,index) in monthList" :prop="item.value" :key="index" :label="item.name"></el-table-column>
        </el-table>
      </div>
    </main>
  </div>
</template>

<script>
  // 引入导出Excel表格依赖
  import FileSaver from "file-saver";
  import XLSX from "xlsx";
  import {
    $budgetAPI,
    $budget
  } from '@/api';
  import {
    setSessionStorage,
    getSessionStorage,
    removeSessionStorage
  } from '@/common/js/storage';
  export default {
    data() {
      return {
        tabActive: 'list1',
        formInline: {
          AREA_ID: '',
          ACCT_MONTH: '',
          HSX_TYPE: '',
          ATTR_TYPE: 2,
          INDEX_CODE: 'YS10000' //指标
        },
        HSX_TYPE_SHOW: true,
        sxList: [{
            name: '政企服务属性',
            value: 2
          },
          {
            name: '政企客户属性',
            value: 1
          },
        ],
        hylxList: [{
            name: '行客'
          },
          {
            name: '商客'
          },
          {
            name: '校园'
          },
          {
            name: '其他'
          }
        ],
        //指标列表
        zbList: [{
            name: '主营业务收入',
            value: 'YS10000'
          },
          {
            name: '基本面收入合计',
            value: 'YS10023'
          },
          {
            name: 'ICT/IDC合计',
            value: 'YS10049'
          },
          {
            name: '码号收入',
            value: 'YS10077'
          }, {
            name: '宽带码号收入',
            value: 'YS10101'
          },
          {
            name: '专线码号收入',
            value: 'YS10102'
          },
          {
            name: '上网专线码号收入',
            value: 'YS10103'
          },
          {
            name: '组网专线码号收入',
            value: 'YS10104'
          }, {
            name: '移动码号收入',
            value: 'YS10105'
          },
          {
            name: '固话码号收入',
            value: 'YS10106'
          },
          {
            name: 'ITV码号收入',
            value: 'YS10107'
          }
        ],
        monthList:[],
        tableData: [],
        showTableLoading: false,
        pickerOptions: this.pickerDisabled(),
        disabledTime: '',
        height: ''
      };
    },
    mounted() {
      this.getHeight()
    },
    watch: {
      'formInline.ATTR_TYPE'(v) {
        if (v == 1) {
          document.title = '政企客户属性';
          this.formInline.INDEX_CODE='';
        } else {
          document.title = '政企服务属性'
        }
      }
    },
    created() {
      this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
      this.formInline.AREA_ID = this.accountInfo.areaId;
      this.getMonth();
      // 计算高度
      window.addEventListener('resize', this.getHeight)
    },
    destroyed() {
      // 计算高度
      window.removeEventListener('resize', this.getHeight)
    },
    methods: {
      // 计算高度
      getHeight() {
        this.height = window.innerHeight - this.$refs.form.$el.offsetHeight - 83 - 54 - 51
      },
      // 查询
      handle_search() {
        this.showTableLoading = true;
        $budgetAPI.monthRevenue(
          this.formInline,
          res => {
            if (res.code == 0) {
              this.HSX_TYPE_SHOW = this.formInline.ATTR_TYPE == 2 ? true : false;
              this.tableData = res.content.content.data;
            }
            this.showTableLoading = false;
          },
          err => {
            this.showTableLoading = false;
          }
        );
      },
      // 导出
      handle_export() {
        let name = this.formInline.ATTR_TYPE == 1 ? '政企客户属性' : '政企服务属性';
        let fields = {
          "area_NAME": "区域名称",
          "p_AREA_NAME": "上级区域名称",
          "manager_NAME": "客户经理名称",
          "vip_NBR": "VIP卡号",
          "vip_NAME": "VIP名称",
          "index_CODE": "指标",
          "value1": "1月",
            "value2": "2月",
            "value3": "3月",
            "value4": "4月",
            "value5": "5月",
            "value6": "6月",
            "value7": "7月",
            "value8": "8月",
            "value9": "9月",
            "value10": "10月",
            "value11": "11月",
            "value12": "12月",
        }
        this.loading = this.$loading({
          lock: true,
          text: "导出中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        $budgetAPI.monthRevenue({
            AREA_ID: this.formInline.AREA_ID,
            ACCT_MONTH: this.formInline.ACCT_MONTH,
            HSX_TYPE: this.formInline.HSX_TYPE,
            ATTR_TYPE: this.formInline.ATTR_TYPE,
            INDEX_CODE: this.formInline.INDEX_CODE,
            pageSize: 10000
          },
          res => {
            this.loading.close();
            if (res.code == 0) {
              let data = res.content.content.data;
              data.forEach(item => {
                for (let i in item) {
                  if (fields.hasOwnProperty(i)) {
                    item[fields[i]] = item[i];
                  }
                  delete item[i]; //删除原先的对象属性
                }
              })
              console.log(data)
              let workbook = XLSX.utils.book_new();
              let ws = XLSX.utils.json_to_sheet(data, {
                header: Object.values(fields)
              });
              XLSX.utils.book_append_sheet(workbook, ws, name);
              let wbOut = XLSX.write(workbook, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
              });
              try {
                FileSaver.saveAs(
                  new Blob([wbOut], {
                    type: "application/octet-stream"
                  }),
                  name + ".xlsx" //Demo.xlsx为导出的表格的名称
                );
              } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbOut);
              }
              return wbOut;
            }
          },
          err => {
            this.loading.close();
          }
        );
      },
      getMonth() {
        $budgetAPI.incomeKeepRegionalMonth({
            maximum: 6,
          },
          res => {
            if (res.code == 0) {
              this.formInline.ACCT_MONTH = res.content;
              this.disabledTime = res.content;
              let disabledMonth=parseInt(this.disabledTime.substring(4));
              for(let i=0;i<disabledMonth;i++){
                this.monthList.push({
                  name:(i+1)+'月',
                  value:'value'+(i+1)
                })
              }

              console.log(this.monthList)
              this.handle_search();
            }
          },
          err => {
            console.log(err);
          }
        );
      },
      pickerDisabled() {
        let self = this;
        return {
          disabledDate(time) {
            if (self.disabledTime) {
              var timeyear = time.getFullYear();
              var timemonth = time.getMonth() + 1;
              if (timemonth >= 1 && timemonth <= 9) {
                timemonth = '0' + timemonth;
              }
              var currentdate = timeyear.toString() + timemonth.toString();
              if (currentdate > self.disabledTime) {
                return true;
              }
            }
          }
        };
      }
    },
  };
</script>

<style lang="scss" scoped>
  .productView_container {
    width: 100%;
    height: 100%;
    &>header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eaeaea;
      height: 40px;
      margin: 0 -20px;
      padding: 0 20px;
      &>p {
        font-weight: bold;
        font-size: 15px;
      }
    }
    &>main {
      padding: 0 10px 10px;
      .main_searchBar {
        border-bottom: 1px solid #d6d9e5;
        /deep/ .el-form-item {
          margin: 6px 10px 6px 0;
        }
        button {
          color: #fff;
          border: none;
          outline: none;
          &:hover {
            opacity: 0.8;
          }
        }
        #search_btn {
          background-color: #2a90de;
        }
        #export_btn {
          background-color: #2cd531;
        }
      }
      .main_navBar {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .area {
          text-align: left;
          display: flex;
          .it {
            cursor: pointer;
            font-size: 14px;
            display: inline-block;
            .td {
              font-weight: bold;
            }
            &:last-child {
              span {
                &:last-child {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  .tables {
    .el-tabs__header {
      margin: 0;
    }
  }
</style>
